<template>
	<view>
		<u-form class="box" :model="form" ref="uForm">
			<u-form-item labelWidth="60" label="收件人:" borderBottom prop="recipientName">
				<u-input placeholder="请输入收件人" v-model="form.recipientName" border="none"></u-input>
			</u-form-item>
			<u-form-item label="电话:" prop="recipientPhone" borderBottom>
				<u-input v-model="form.recipientPhone" prefixIconStyle="font-size: 22px;color: #909399" border="none"
					placeholder="请输入电话" maxlength="12"></u-input>
			</u-form-item>
			<u-form-item labelWidth="70" label="所在地址:" prop="location" borderBottom>
				<u-input v-model="form.location" prefixIconStyle="font-size: 22px;color: #909399" border="none"
					placeholder="请输入所在地址" maxlength="12"></u-input><u-icon slot="right" name="map"
					@tap="open"></u-icon><text @tap="open">选择</text>
			</u-form-item>
			<u-form-item labelWidth="70" label="详细地址:" prop="location" borderBottom>
				<u-input v-model="form.street" prefixIconStyle="font-size: 22px;color: #909399" border="none"
					placeholder="请输入详细地址" maxlength="12"></u-input>
			</u-form-item>
			<u-form-item labelWidth="100" label="设为默认地址:" borderBottom>
				<u-switch :active-value="true" :inactive-value="false" slot="right" v-model="form.isDefault"
					activeColor="#13ce66"></u-switch>
			</u-form-item>
		</u-form>
		<cityPicker :column="column" :default-value="defaultValue" @confirm="confirm" @cancel="cancel"
			:visible="visible" />
		<u-button @click="submitForm" color="linear-gradient(to right, rgb(236, 140, 4), rgb(213, 70, 4))"
			shape="circle" style="width: 60%;margin-top: 1rem;" text="提交" size="normal"></u-button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	export default {
		data() {
			return {
				visible: false,
				form: {
					location: "",
					recipientName: "",
					recipientPhone: "",
					street: "",
					isDefault: false
				},
				formda: {},
				type: '',
				column: 3,
				defaultValue: '420103',
				isDefaultSwitch: false
			}
		},
		components: {
			cityPicker
		},
		onLoad(options) {
			if (options.data) {
				const data = JSON.parse(options.data);
				this.form = data;
				console.log(this.form);
			}

			this.type = options.type;

		},
		created() {
			// const {
			// 	uid
			// } = uni.getStorageSync('uid');

			// // Assign uid to userId
			// this.userId = uid;
			if (this.type === 'edit') {
				this.getDetile()
			}
		},
		computed: {
		
			userId() {
		
				return this.$store.state.uid
			}
		},
		methods: {
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				// 去除字符串末尾的空格
				this.form.location = val.name.trim();

				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			submitForm() {
				if (this.type === 'add') {
					// 调用添加接口
					this.logAdd()
				} else if (this.type === 'edit') {
					// 调用编辑接口
					this.logEdeti()
				}
			},
			async getDetile() {
				// 构建请求参数
				const param = {
					addressId: this.form.addressId,
					userId: this.userId
				};

				// 发送请求
				const res = await this.$request.get('/system/address/queryByKey', param);
				console.log(res);
				if (res.code == 200) {
					// 如果请求成功，可以根据接口返回的数据做相应处理
					// 例如更新列表数据等
					this.form = res.data.address
				}
			},
			async logEdeti() {
				// 构建请求参数
				const param = {
					isDefault: this.form.isDefault ? 1 : 0, // 如果有默认地址的设置，可以在这里设置
					location: this.form.location,
					recipientName: this.form.recipientName,
					recipientPhone: this.form.recipientPhone,
					// 如果需要详细地址，也可以从表单中取值
					street: this.form.street,
					userId: this.userId,
					addressId: this.form.addressId
				};

				// 发送请求
				const res = await this.$request.post('/system/address/updateById', param);
				console.log(res);
				if (res.code == 200) {
					// 如果请求成功，可以根据接口返回的数据做相应处理
					// 例如更新列表数据等
					this.$refs.uToast.show({
						type: 'success',
						title: '成功主题(带图标)',
						message: res.message,
					})
					uni.redirectTo({
						url: "/pages/tabBar/adderss/adderss" // 返回上一页，可以根据需要调整返回的页面数
					})
				}
			},
			gomap() {


			},
			async logAdd() {
				// 构建请求参数
				const param = {
					isDefault: this.form.isDefault ? 1 : 0, // 如果有默认地址的设置，可以在这里设置
					location: this.form.location,
					recipientName: this.form.recipientName,
					recipientPhone: this.form.recipientPhone,
					// 如果需要详细地址，也可以从表单中取值
					street: this.form.street,
					userId: this.userId
				};

				// 发送请求
				const res = await this.$request.post('/system/address/add', param);
				console.log(res);
				if (res.code == 200) {
					// 如果请求成功，可以根据接口返回的数据做相应处理
					// 例如更新列表数据等
					this.$refs.uToast.show({
						type: 'success',
						title: '成功主题(带图标)',
						message: res.message,
					})
					uni.navigateTo({
						url: "/pages/tabBar/adderss/adderss" // 返回上一页，可以根据需要调整返回的页面数
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: #ffffff;
		padding: 0 1rem;
	}
</style>